#vuefire vuejs

[deltainfoteklive]

Best VueJS Frameworks to Follow

In the ever-evolving world of web development, staying updated with the latest tools and technologies is crucial. When it comes to VueJS, a progressive JavaScript framework, developers have a plethora of options to choose from. This article dives deep into the best VueJS frameworks to follow in 2023, offering valuable insights, expert recommendations, and FAQs to help you make informed decisions for your next project. Best VueJS Frameworks to Follow in 2023 Here, we present a list of the top VueJS frameworks to consider in 2023, each designed to cater to specific development needs and requirements. 1. Vue CLI - Power Up Your Project Setup Vue CLI, a standard tool for Vue applications, streamlines project setup and provides an intuitive interface to manage dependencies, configurations, and plugins. With Vue CLI, you can focus more on coding and less on configuration. 2. Nuxt.js - Optimal SSR and SPA Hybrid Nuxt.js is a versatile framework that excels in server-side rendering (SSR) and single-page application (SPA) development. Its module-based architecture enhances development speed and performance optimization. 3. Vuetify - Material Design at Your Fingertips For a visually appealing and responsive user interface, Vuetify offers pre-designed components following Google's Material Design guidelines. This framework empowers developers to create stunning applications with ease. 4. Quasar - Build Responsive Apps with Flexibility Quasar is a high-performance framework that supports building responsive applications for various platforms using a single codebase. Its extensive library of components and plugins accelerates development. 5. VueX - State Management Made Simple VueX is not just a library but an integral part of Vue ecosystem. It simplifies state management in complex applications, making it easier to manage and share data across components. 6. Vue Router - Effortless Navigation For creating dynamic and seamless navigation experiences, Vue Router is the go-to choice. It enables developers to define routes and nested views in a declarative manner. 7. Vue Test Utils - Ensure Code Quality Testing is essential in any development process, and Vue Test Utils provides a comprehensive suite of utilities for testing Vue components effectively, ensuring code quality and reliability. 8. Vue i18n - Globalize Your App For multilingual applications, Vue i18n offers internationalization support. It allows developers to easily add translations and switch between languages, enhancing user experience across different regions. 9. Vue Apollo - Vue meets GraphQL Vue Apollo seamlessly integrates Vue with GraphQL, offering efficient and powerful data fetching solutions. It simplifies handling complex data requirements and enhances overall application performance. 10. Vue Class Component - Class Syntax, Vue Magic Vue Class Component brings class-style component syntax to Vue, making it easier for developers familiar with class-based programming to transition smoothly into Vue development. 11. Vue Router Next - Exploring New Possibilities Vue Router Next, currently in active development, offers exciting new features and improvements. It's worth keeping an eye on this framework as it evolves. 12. Element UI - Elegant Desktop Components Element UI provides a collection of elegant and customizable components for building desktop applications. It follows a design language inspired by desktop applications. 13. Buefy - Lightweight UI Components Buefy, based on Bulma CSS framework, offers lightweight and responsive UI components for VueJS applications. It's a great choice for projects prioritizing simplicity and performance. 14. Vue Auth - Secure Your App Security is paramount in today's digital landscape. Vue Auth simplifies authentication and authorization processes, ensuring your VueJS applications are well-protected. 15. Vuefire - Vue Meets Firebase Vuefire bridges the gap between Vue and Firebase, enabling real-time data synchronization and efficient data binding. It's an excellent choice for building dynamic applications. 16. Vue Material - Material Design Reimagined Vue Material reimagines Material Design by Google, offering a set of beautifully crafted components and directives to create stunning interfaces that adhere to Material Design principles. 17. Vue Formulate - Advanced Form Handling Building and validating forms is a breeze with Vue Formulate. This framework simplifies complex form handling tasks and enhances user interactions. 18. Vue Apollo Next - Evolving with GraphQL Similar to Vue Router Next, Vue Apollo Next is actively evolving to bring improvements and optimizations to Vue's integration with GraphQL. 19. Vue Multiselect - Effortless Multiselection Vue Multiselect provides intuitive and customizable multiselect components, enhancing user experience when dealing with multiple options. 20. Vue Content Loading - Enhance UX with Skeleton Screens Vue Content Loading lets you create engaging skeleton screens to improve user experience while waiting for content to load, reducing perceived loading times. 21. Vue Virtual Scroller - Efficiently Handle Large Lists For applications dealing with extensive lists or grids, Vue Virtual Scroller efficiently renders only visible elements, resulting in improved performance and reduced memory usage. 22. Vue Good Table - Feature-Rich Data Tables Vue Good Table simplifies the creation of feature-rich and customizable data tables, complete with sorting, filtering, and pagination functionalities. 23. Vuesax - Responsive Design Components Vuesax offers a collection of responsive and customizable components, helping developers create modern and visually appealing applications. 24. Vue Toastification - Elegant Toast Notifications Toast notifications are essential for user feedback. Vue Toastification provides elegant and customizable toast messages for VueJS applications. 25. Vue Glide - Create Stunning Carousels Vue Glide facilitates the creation of impressive carousels and sliders, enabling developers to showcase content in a visually appealing manner. Frequently Asked Questions (FAQs) Is Vue CLI suitable for large-scale projects? Absolutely! Vue CLI provides a structured approach to project setup, which is beneficial for both small and large-scale projects. Its plugin system allows you to customize the setup to meet specific requirements. What sets Nuxt.js apart from other frameworks? Nuxt.js excels in server-side rendering and offers an intuitive module-based architecture. This combination enhances SEO, performance, and development speed, making it a preferred choice for complex projects. Can I use Vuetify components with other Vue frameworks? Yes, Vuetify's components can be integrated into various Vue frameworks. Its adherence to Material Design principles ensures consistency and a polished look across different applications. How does VueX simplify state management? VueX centralizes the state of your application, making it accessible and manageable from any component. This eliminates the need to pass props between components, leading to cleaner and more organized code. Is Vue Router suitable for single-page applications? Absolutely, Vue Router is well-suited for single-page applications. It provides a powerful mechanism for managing routes, views, and navigation, enhancing the overall user experience. Does Vue Auth support various authentication methods? Yes, Vue Auth supports a variety of authentication methods, including token-based authentication, OAuth, and social login. This flexibility allows you to implement the authentication strategy that best fits your application. Conclusion: Embrace the Power of VueJS Frameworks As we journey through 2023, the world of VueJS frameworks continues to evolve, offering developers an array of tools to create robust, performant, and visually appealing web applications. By exploring the best VueJS frameworks discussed in this article, you're poised to elevate your web development projects to new heights. Remember, the key lies in understanding your project's unique requirements and selecting the framework that aligns seamlessly with your goals. Whether you're aiming for efficient SSR, stunning UI components, enhanced state management, or seamless navigation, there's a VueJS framework tailored to your needs. So, go ahead and embrace the power of VueJS frameworks to craft exceptional web experiences that captivate users and leave a lasting impact. Read the full article

[laravelvuejs]

VueFire: CRUD Application with Vue.js and Firebase VueFire: CRUD Application with Vue.js and Firebase Want to learn how to integrate Firebase and Vuefire into your Vue.js applications? This video does just that ... source

[vuejstutorial4u]

RT @posva: I'm launching a @Patreon !! 🚀 I want to keep working on the @vuejs ecosystem in a sustainable way ☀️ If you feel that my work on any of vue libraries like the router, vuefire or others helps you, good news! You can help me too 😊! 👉 https://t.co/N91Ra0NNee #Vuejs

[mancdev]

VueJS & Firebase Cloud Firestore Stripped-Back - Tutorial Part 2

In this tutorial series we are using a stripped-back approach to getting started with  Vuejs & Firebase Cloud Firestore to build full-stack web applications. No CLIs or build tools just a HTML page.

Putting the ‘C’ in CRUD

Welcome back to our Vue and Firebase stripped back tutorial. If you skipped part 1 of this tutorial you can get it here.

Let’s start straightaway from where we left off in part 1 and start looking at how we can develop our employee tracker app, EmployeeMagic, to let the user add records to their employee database. This represents the C in CRUD (Create, Read, Update, Delete).

We’ll start by adding some input boxes to our template for the user to be able to add employees. The fields we want are first and last names, job title, department and age.

Let’s start by adding a First Name field.

<body>

     <div id=“app”>

         <div v-bind:style=“mainStyle”>

             <h1>{{ appTitle }}</h1>

             <label>First Name</label>              <input type=“text” v-model=“firstName”>

        </div>

     </div>

</body>

Notice the input element, we’ve added a Vue directive to it called v-model and we’ve assigned it a value of firstName. For AngularJS devs this will seem very familiar. v-model is a data binding directive that binds the input element to a variable in our view model (the data in the Vue Instance Object). Therefore whatever value the user keys into the input box will be automatically assigned to a variable in your Vue Instance Object. Now we don’t presently have a firstName variable in data in our Instance Object so we need to add it and assign it an initial value, in this case an empty string.

<script>      var app = new Vue({          el : '#app’,          data : {              appTitle : ‘EmployeeMagic’,              mainStyle : { ‘margin’ : ’20px’ },               firstName : ‘’          }      }) </script>

Just to prove that our data-binding in Vue is working and is in fact working in both directions (from the template to the Instance Object and from the Instance Object to the template), also called two-way data binding, we’ll stick a double-curly on the end of the input box eg

<input type=“text” v-model=“firstName”>{{ firstName }}

Save the file and refresh the page in your browser. As you begin to type in the First Name box, the name is displayed at the side of it. The input is assigning it to the firstName variable (via the v-model directive) and Vue is watching for changes in the firstName variable and when it detects one it changes anywhere in the page where firstName has a binding, in this case via the double-curly.

OK, enough of the fun and games, let’s add our other fields to the template and create their corresponding variables in the data section. As we’re grouping several fields together to form an employee we’ll change it to put them all in their own object called employee and change the template to bind the input boxes to the relevant properties on the employee object instead. We’ve proved our point with the two-way data binding for now so we’ll remove our double curly.

<body>

    <div id=“app”>

        <div v-bind:style=“mainStyle”>

            <h1>{{ appTitle }}</h1>

            <label>First Name</label>             <input type=“text” v-model=“employee.firstName”></br>

            <label>Last Name</label>             <input type=“text” v-model=“employee.lastName”></br>

            <label>Job Title</label>             <input type=“text” v-model=“employee.jobTitle”></br>

            <label>Dept.</label>             <input type=“text” v-model=“employee.dept”></br>

            <label>Age</label>             <input type=“number” v-model:number=“employee.age”></br>

      </div>

    </div>

</body>

Notice that on the Age input we’ve added an extra command to the v-model directive, :number. This is very useful in Vue as, although the type of the input is set to number so the user cannot input anything other than valid numbers, by default when the value is converted by the binding to Vue data properties, it is converted as a string. As we want the age property to remain a number type, the v-model:number directive is required.  <script>     var app = new Vue({          el : '#app’,         data : {             appTitle : ‘EmployeeMagic’,             mainStyle : { ‘margin’ : ’20px’ },             employee : {firstName : ‘’,                                  lastName : ‘’,                                  jobTitle : ‘’,                                  dept : ‘’,                                  age : 0 }         }     }) </script> We’ll next add a Save button which will write the entered employee to the database. To carry out the task of saving when the user clicks the Save button we need to hook the button into our Vue Instance Object and call a function that’s run to save our new employee record. To do this we need to use another Vue directive called v-on:click

            <label>Age</label>             <input type=“number” v-model:number=“employee.age”></br>         

            <button v-on:click=“saveEmployee()”>Save</button>

        </div>

    </div>

</body>

v-on is used to handle events and the :click is the specific event to be triggered on. We then assign the function that we want to run once the event (click) is triggered, in this case saveEmployee().

If you remember, in part 1 of this tutorial we mentioned that when using the v-bind directive along with a colon-command that you could use shorthand instead by dropping the v-bind eg v-bind:style could be entered as just :style for short. The same applies to the v-on directive however as it’s an event, rather than using the colon, you must use a @ instead. Therefore instead of using v-on:click you could use the shorthand version which is @click. Ultimately it’s a matter of preference and usually I would use the shorthand but to provide full explanations in these tutorials we’ll stick to using the verbose style.

We now need to write our saveEmployee() click handler function. This involves declaring functions or methods in our Vue Instance Object which you can do by declaring a new first-level object on the Instance Object called methods. All of your logic for our app will live in functions declared in Vue’s methods object. <script>     var app = new Vue({          el : '#app’,         data : {             appTitle : ‘EmployeeMagic’,             mainStyle : { ‘margin’ : ’20px’ },             employee : {firstName : ‘’,                                  lastName : ‘’,                                  jobTitle : ‘’,                                  dept : ‘’,                                  age : 0 }         },         methods : {             saveEmployee : function() {                 alert(‘You have saved ‘ + this.employee.firstName + ‘ ‘ + this.employee.lastName)             }         }     }) </script> So, you can see that we’ve declared a saveEmployee function within the top-level methods object. In the above we’re not saving anything, we’re just going to display a standard alert message which includes displaying the last name and first name of the employee we’re saving. Notice that we’re using this to refer to our employee properties. Any variable declared in the data object of our Instance Object that we want to reference in our methods must be referenced using this, otherwise Vue won’t recognise it. As anyone who has worked with Javascript for any length of time knows, using this can be problematic as what it points to can change depending on the context from where it was called. There are ways around using this which we’ll discuss later but we’ll just stick with it as it is for now. Save the file, refresh your browser and enter the details of an employee, click Save and you should see the alert message appear. We’re now at the point of needing to be able to physically save our new employee to our Firebase Cloud Firestore. To get started with this you just need a bog-standard Google account. If you’ve got a gmail account or use any of Google’s products where you need to log-in then you’ve got a Google account. If not then you’ll need to create one which you can do on the Firebase site. To get started go to the Firebase web-site (https://firebase.com) and click Go To Console. If you’re not signed in to your Google account or you don’t have one you’ll then be taken to the usual sign-in/sign-up pages to get going, otherwise you’ll be taken to the Firebase console. Click Add Project and enter a project name and select your region. Once in the main console click the Database option on the left. You’ll be given the option of Realtime Database or Cloud Firestore. Make sure you select Cloud Firestore. You’ll also be asked how you want the security level to be setup, make sure you select Development/Test mode otherwise you’ll have to start setting up security rules manually which are a whole other subject altogether. Your Cloud Firestore will then be setup, which might take a short while. Once your database is setup we don’t need to do anything else in the database console however we do need to grab the code and libraries for getting Firebase into our app. To do this click the Project Overview option on the left. In the Get Started page click on the option for Add Firebase to your web app. In the window that pops up you’ll see a code snippet, just click the Copy button. Go back to your editor and paste the code snippet below the closing </body> tag and above the VueJS CDN script tag as shown below : </body>

<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>     <script>    // Initialize Firebase    var config = {        apiKey: "AIzaSyA0KlHuISpQL1F0XMWv1FfmtbaJQmPKwqQ",        authDomain: "vuefire-da3bf.firebaseapp.com",        databaseURL: "https://vuefire-da3bf.firebaseio.com",        projectId: "vuefire-da3bf",        storageBucket: "vuefire-da3bf.appspot.com",        messagingSenderId: "1094070580435"    };    firebase.initializeApp(config); </script> <script src="https://cdn.jsdelivr.net/npm/vue"></script><script>    var app = new Vue({ The version of the Firebase CDN link above (4.9.1) is current at the time of writing (Feb 2018) but is likely to be different by the time you are reading this, always use the link copied from the Firebase page. This details in the config object are specific to my account and project and yours will certainly be different, make sure you keep the code exactly the same as the code snippet copied from your Firebase project. The code snippet from Firebase however doesn’t include a CDN for Cloud Firestore, this may well be due to it still being officially in beta at the time of writing and may well be included in the standard code snippet by the time you’re reading this so it’s worth checking. At this point in time however, we’ll need to add it manually and the best way to do it is just to copy the line for the firebase CDN link for firebase.js, paste it below it and change the new line from firebase.js to firebase-firestore.js as below : <script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script> <script src="https://www.gstatic.com/firebasejs/4.9.1/firebase-firestore.js"></script> Save the page and refresh in Chrome with the Console open and make sure there are no errors displayed before proceeding and if there are check you have followed everything above correctly. We’ve now got our libraries for Cloud Firestore and the code snippet will initialise Firebase to enable you to utilise your newly created database. Now we have to let our Vue app know about it. What we need to do is to create a Firestore object within our Vue app when it first runs so it’s available to us throughout our app. To ensure that our Firestore object is created at the beginning during initialisation of our app, we need to utilise a lifecycle hook that Vue provides, called created. Lifecycle hooks are effectively events that occur during Vue’s internal processing of our Instance Object. Vue exposes these events to us so we can hook into them and carry out some tasks at that specific point in our Vue Instance Object’s processing lifecycle. With the created hook, we can attach the tasks we want to carry out when the Vue Instance Object is first created, which is exactly what we need to do to generate a Firestore object to ensure we can access the database throughout the app. We’ll first initialise an object in our data section called db that we’ll use to access Firestore. We’ll then include a created hook which is a function containing our initialisation code. In this case we just want to assign an object from Firestore that we can use :

<script>     var app = new Vue({          el : ’#app’,         data : {             appTitle : ‘EmployeeMagic’,             mainStyle : { ‘margin’ : ’20px’ },             employee : {firstName : ‘’,                                  lastName : ‘’,                                  jobTitle : ‘’,                                  dept : ‘’,                                  age : 0 },             db : {}         },        methods : {             saveEmployee : function() {                 alert(‘You have saved ‘ + this.employee.firstName + ‘ ‘ + this.employee.lastName)             }       },       created : function() {           this.db = firebase.firestore()       }     }) </script> We’re now plugged into our Firestore through our db object. It’s now fairly straightforward to save our data to Firestore. We use Firestore’s add() function to save our employee object which, as we covered earlier, is automatically populated through data binding when the user enters the information into the input boxes. To call add() we must tell Firestore which Collection to save the new object to. Collections in Firestore represent a formal declaration of the documents or objects we’re going to save. This makes it much more like the Tables and Records we’re used to in relational databases, where tables are collections and records are documents. In this case we’ll save it to a collection called Employees - note that we didn’t explicitly setup the Employees collection previously, it will be automatically created for us by Firestore if it doesn’t already exist. We’ll remove the alert from our saveEmployee function and replace it with the line to save the new employee.       methods : {             saveEmployee : function() {                 this.db.collection(‘Employees’).add(this.employee);             }       }, Again notice that we’re referencing db using this, as we are with employee (and all of our data properties). We’ll review this shortly but it’s important to note it for now. Save the file in your code editor and refresh it in Chrome. Enter the details of an employee and click Save. Nothing will appear to happen on the page, however open your Firebase console, select Database and you’ll see your new record under the Employees collection. Notice that the record has a strange looking unique Id automatically assigned to it, we’ll be utilising this in another part of the tutorial. Let’s tidy up the saving process. Firstly we want to make sure it doesn’t save unless something is entered into both the First and Last Name fields. Secondly we want some visual indication that you have saved to the database, specifically the input boxes are cleared ready for another new employee. In order to clear the employee inputs we’ll implement a separate function called clearEmployee() so we’re not cluttering up our save function.       methods : {             saveEmployee : function() {                 if ((this.employee.firstName) && (this.employee.lastName))  {                     this.db.collection(‘Employees’).add(this.employee)                     clearEmployee()                 }                 else                     alert(‘You must enter both a first and last name to save.’)             },             clearEmployee : function() {                 this.employee = { firstName : ‘’,                                              lastName : ‘’,                                              jobTitle : ‘’,                                              dept : ‘’,                                              age : 0 }             }       }, Note 2-way data binding, changing the properties in the view model reflects in the input boxes that they’re bound to. It’s important to note that Firestore’s add() function is asynchronous so any code that comes after it, such as clearing the input fields, will be executed before it can be determined if the employee was saved correctly. Therefore rather than simply call the clearEmployee() function immediately after add() as we have done above, we’ll need to utilise the promise which Firestore’s add() function returns and put any code we want to execute after it’s successfully saved into the returned promise’s then().           saveEmployee : function() {               if ((this.employee.firstName) && (this.employee.lastName))                       this.db.collection(‘Employees’).add(this.employee)                     .then(function() {                         this.clearEmployee()                     })                     .catch(function() {                         console.log(‘Error saving employee ‘ + this.employee.firstName + ‘ ‘ + this.employee.lastName)                     })               else                     alert(‘You must enter both a first and last name to save.’)           }, Here we’ve chained a then() to the add() function call and passed in a function which calls the clearEmployee() to clear the properties for the input boxes only after we’re sure of a successful save. We’ve also chained a catch() so any saving errors are logged to the console.

A brief explain of Promises

If you’re not familiar with promises, they’re simply a way to handle asynchronous code. Asynchronous functions are just standard functions which carry out some processing but return control back to the caller before completing it’s process (to avoid blocking the app’s execution). Async functions usually return a promise object which enables the code which called the function to implement any tasks that needs to execute only after the async function has fully completed it’s process. In this instance we only want to clear the input boxes once we know that the employee has definitely saved. To do this we call then() which is a function on the returned promise object. then() accepts a function as a parameter which we use to execute any code we want after we know the save has completed, in this case to clear the employee properties and inputs. As we’ve done above you can also chain a call to the promise’s catch() function to execute any code should the async function not succeed. With all of that said, the new changes we’ve just made WILL NOT WORK!! And they will not work because of the this issue that was foretold. The reference to this changes depending on the context in which it was called. Therefore when we come to execute the code that is passed to the then() or catch() functions, this points to something else other than our Instance Object data and we’ll get errors! There are a couple of ways around this. The traditional way is to simply assign this at the beginning of a function to another variable, usually called that, and then reference that instead of this throughout the function to be sure that you’ll always reference the desired object. This works but it means you’re always having to remember to implement it at the beginning of every method. The other way is to reference the Instance Object explicitly where you know this won’t work for you. In this tutorial we declared a variable to contain our Vue Instance Object called app eg var app = new Vue({. You can therefore call app.clearEmployee() instead of this.clearEmployee() in the then() function and it would work. The problem is that context again gets in the way and you cannot use an explicit reference to the Instance Object in it’s own context so saying app.db.collection(‘Employees’).add(app.employee) in the main saveEmployee() function won’t work either, so you’d end up using this in some places and app in others. 

 The ideal solution would enable us to use one way throughout to refer to the properties and methods on your Instance Object to ensure consistency but without additional workload that you would need to remember to implement on each method. Fortunately ES6/ES2015 introduced arrow functions which help us resolve this problem. With arrow functions we can use an explicit reference to the Instance Object in every context throughout our methods. Arrow functions, from a declarative standpoint, simply change a function declaration from :      function() {  }

to      () => {  } So let’s change our saveEmployee() function from a standard function declaration to an arrow function and do the same with the then() and catch() functions. Then replace every reference of this to app.          saveEmployee : () => {                if ((app.employee.firstName) && (app.employee.lastName))                       app.db.collection(‘Employees’).add(app.employee)                    .then(() => {                         app.clearEmployee()                    })                   .catch(() => {                         console.log(‘Error saving employee ‘ + app.employee.firstName + ‘ ‘ + app.employee.lastName)                    })               else                     alert(‘You must enter both a first and last name to save.’)           }, For consistency purposes we should also change our clearEmployee() method as well           clearEmployee : () => {               app.employee = { firstName : ‘’,                                              lastName : ‘’,                                              jobTitle : ‘’,                                              dept : ‘’,                                              age : 0 }            } The only exception to this rule is the created lifestyle hook function where the VueJS docs expressly recommends not declaring it as an arrow function so we’ll leave it as a standard function declaration (including referencing this rather than app). Like with Promises, arrow functions are a fairly new addition to JS so you must be using an evergreen browser, like Chrome, which implements them natively otherwise you’ll need to use a transpiler such as Babel. We’ve now completed the Create task from our CRUD list. In this tutorial we’ve added input boxes and bound them to properties on our view model to create 2-way data binding. We’ve added events and methods to our Instance Object, created a Firebase Cloud Firestore project and hooked it into our app, covered Vue’s lifecycle hooks to initialise a reference to our database and then covered how to save employees to our Cloud Firestore. Finally we covered the issues with using this and how arrow functions can help us overcome these problems. In the next part of the tutorial we’ll cover the R in CRUD, Reading (or Retrieving) employees from our database. We’ll cover getting data back from our Firestore and explain how to implement realtime updates. I hope you’ll join me.

You can download the completed code for this part of the tutorial on Github using the repo below and select the part2 folder. https://github.com/MancDev/VueFire

[javascriptnews4u]

RT @posva: I'm launching a @Patreon !! 🚀 I want to keep working on the @vuejs ecosystem in a sustainable way ☀️ If you feel that my work on any of vue libraries like the router, vuefire or others helps you, good news! You can help me too 😊! 👉 https://t.co/N91Ra0NNee

[nukos-kitchen]

nukos starred vuejs/vuefire

May 24, 2017

via nukos’s Activity

[deltainfoteklive]

Best VueJS Frameworks to Follow

In the ever-evolving world of web development, staying updated with the latest tools and technologies is crucial. When it comes to VueJS, a progressive JavaScript framework, developers have a plethora of options to choose from. This article dives deep into the best VueJS frameworks to follow in 2023, offering valuable insights, expert recommendations, and FAQs to help you make informed decisions for your next project. Best VueJS Frameworks to Follow in 2023 Here, we present a list of the top VueJS frameworks to consider in 2023, each designed to cater to specific development needs and requirements. 1. Vue CLI - Power Up Your Project Setup Vue CLI, a standard tool for Vue applications, streamlines project setup and provides an intuitive interface to manage dependencies, configurations, and plugins. With Vue CLI, you can focus more on coding and less on configuration. 2. Nuxt.js - Optimal SSR and SPA Hybrid Nuxt.js is a versatile framework that excels in server-side rendering (SSR) and single-page application (SPA) development. Its module-based architecture enhances development speed and performance optimization. 3. Vuetify - Material Design at Your Fingertips For a visually appealing and responsive user interface, Vuetify offers pre-designed components following Google's Material Design guidelines. This framework empowers developers to create stunning applications with ease. 4. Quasar - Build Responsive Apps with Flexibility Quasar is a high-performance framework that supports building responsive applications for various platforms using a single codebase. Its extensive library of components and plugins accelerates development. 5. VueX - State Management Made Simple VueX is not just a library but an integral part of Vue ecosystem. It simplifies state management in complex applications, making it easier to manage and share data across components. 6. Vue Router - Effortless Navigation For creating dynamic and seamless navigation experiences, Vue Router is the go-to choice. It enables developers to define routes and nested views in a declarative manner. 7. Vue Test Utils - Ensure Code Quality Testing is essential in any development process, and Vue Test Utils provides a comprehensive suite of utilities for testing Vue components effectively, ensuring code quality and reliability. 8. Vue i18n - Globalize Your App For multilingual applications, Vue i18n offers internationalization support. It allows developers to easily add translations and switch between languages, enhancing user experience across different regions. 9. Vue Apollo - Vue meets GraphQL Vue Apollo seamlessly integrates Vue with GraphQL, offering efficient and powerful data fetching solutions. It simplifies handling complex data requirements and enhances overall application performance. 10. Vue Class Component - Class Syntax, Vue Magic Vue Class Component brings class-style component syntax to Vue, making it easier for developers familiar with class-based programming to transition smoothly into Vue development. 11. Vue Router Next - Exploring New Possibilities Vue Router Next, currently in active development, offers exciting new features and improvements. It's worth keeping an eye on this framework as it evolves. 12. Element UI - Elegant Desktop Components Element UI provides a collection of elegant and customizable components for building desktop applications. It follows a design language inspired by desktop applications. 13. Buefy - Lightweight UI Components Buefy, based on Bulma CSS framework, offers lightweight and responsive UI components for VueJS applications. It's a great choice for projects prioritizing simplicity and performance. 14. Vue Auth - Secure Your App Security is paramount in today's digital landscape. Vue Auth simplifies authentication and authorization processes, ensuring your VueJS applications are well-protected. 15. Vuefire - Vue Meets Firebase Vuefire bridges the gap between Vue and Firebase, enabling real-time data synchronization and efficient data binding. It's an excellent choice for building dynamic applications. 16. Vue Material - Material Design Reimagined Vue Material reimagines Material Design by Google, offering a set of beautifully crafted components and directives to create stunning interfaces that adhere to Material Design principles. 17. Vue Formulate - Advanced Form Handling Building and validating forms is a breeze with Vue Formulate. This framework simplifies complex form handling tasks and enhances user interactions. 18. Vue Apollo Next - Evolving with GraphQL Similar to Vue Router Next, Vue Apollo Next is actively evolving to bring improvements and optimizations to Vue's integration with GraphQL. 19. Vue Multiselect - Effortless Multiselection Vue Multiselect provides intuitive and customizable multiselect components, enhancing user experience when dealing with multiple options. 20. Vue Content Loading - Enhance UX with Skeleton Screens Vue Content Loading lets you create engaging skeleton screens to improve user experience while waiting for content to load, reducing perceived loading times. 21. Vue Virtual Scroller - Efficiently Handle Large Lists For applications dealing with extensive lists or grids, Vue Virtual Scroller efficiently renders only visible elements, resulting in improved performance and reduced memory usage. 22. Vue Good Table - Feature-Rich Data Tables Vue Good Table simplifies the creation of feature-rich and customizable data tables, complete with sorting, filtering, and pagination functionalities. 23. Vuesax - Responsive Design Components Vuesax offers a collection of responsive and customizable components, helping developers create modern and visually appealing applications. 24. Vue Toastification - Elegant Toast Notifications Toast notifications are essential for user feedback. Vue Toastification provides elegant and customizable toast messages for VueJS applications. 25. Vue Glide - Create Stunning Carousels Vue Glide facilitates the creation of impressive carousels and sliders, enabling developers to showcase content in a visually appealing manner. Frequently Asked Questions (FAQs) Is Vue CLI suitable for large-scale projects? Absolutely! Vue CLI provides a structured approach to project setup, which is beneficial for both small and large-scale projects. Its plugin system allows you to customize the setup to meet specific requirements. What sets Nuxt.js apart from other frameworks? Nuxt.js excels in server-side rendering and offers an intuitive module-based architecture. This combination enhances SEO, performance, and development speed, making it a preferred choice for complex projects. Can I use Vuetify components with other Vue frameworks? Yes, Vuetify's components can be integrated into various Vue frameworks. Its adherence to Material Design principles ensures consistency and a polished look across different applications. How does VueX simplify state management? VueX centralizes the state of your application, making it accessible and manageable from any component. This eliminates the need to pass props between components, leading to cleaner and more organized code. Is Vue Router suitable for single-page applications? Absolutely, Vue Router is well-suited for single-page applications. It provides a powerful mechanism for managing routes, views, and navigation, enhancing the overall user experience. Does Vue Auth support various authentication methods? Yes, Vue Auth supports a variety of authentication methods, including token-based authentication, OAuth, and social login. This flexibility allows you to implement the authentication strategy that best fits your application. Conclusion: Embrace the Power of VueJS Frameworks As we journey through 2023, the world of VueJS frameworks continues to evolve, offering developers an array of tools to create robust, performant, and visually appealing web applications. By exploring the best VueJS frameworks discussed in this article, you're poised to elevate your web development projects to new heights. Remember, the key lies in understanding your project's unique requirements and selecting the framework that aligns seamlessly with your goals. Whether you're aiming for efficient SSR, stunning UI components, enhanced state management, or seamless navigation, there's a VueJS framework tailored to your needs. So, go ahead and embrace the power of VueJS frameworks to craft exceptional web experiences that captivate users and leave a lasting impact. Read the full article

[mancdev]

VueJS & Firebase Cloud Firestore Stripped-Back - Tutorial Part 3

In this tutorial series we are using a stripped-back approach to getting started with Vuejs & Firebase Cloud Firestore to build full-stack web applications. No CLIs or build tools, just a HTML page.

Retrieving realtime data 

In part three of this tutorial we’re covering the R in CRUD, reading or retrieving data. We’ll cover querying the employee data we want, retrieve and display it in our app page and make it all work in realtime. If you haven’t read the previous part of the tutorial you can get it here, if you haven’t read the first part you can do so here. In the previous part we covered creating employee records and in this part we want to display those records in our app so you can see instantly when a new record has been added. We want to get the data back at the very beginning of our app so the list of existing employees displays immediately. To achieve this we’ll need to add the code to retrieve the data into the created lifecycle hook. We then declare a query based on the collection we want to retrieve from eg Employees

     created : function() {          let that = this                   that.db = firebase.firestore()

         let query = that.db.collection(’Employees’) 

     }

Note : We covered the issue of using this in part 2. We resolved it in our functions inside of the methods object by using arrow functions rather than standard functions and referencing the Instance Object explicitly eg app. However as Vue recommends not to use arrow functions for lifecycle hooks like created, I’ve opted for consistency by assigning this to a variable called that and refering to that throughout the lifecycle hook function when referencing the properties and methods of the Vue Instance. Now we have a Firestore query object assigned which points to the collection we want, we can call a method on that object to actually retrieve the data from Firestore. There are a couple of methods we can use to grab the data back from the query but we want to get it in realtime. When we say realtime we essentially want to retrieve the data from the query immediately and then listen for any changes in the data which occur so we can act on those changes as they happen. So once we retrieve data in realtime we can react to changes in the same way as you would upon initially retrieving it - to display them on our page using Vue’s directives and data binding. The next thing we need to do is to a declare a new array in the data section of our Instance Object that we can retrieve the employee data into and display on the page.

     var app = new Vue({          el : ’#app’,         data : {             appTitle : ‘EmployeeMagic’,             mainStyle : { ‘margin’ : ’20px’ },             employee : {firstName : ‘’,                                  lastName : ‘’,                                  jobTitle : ‘’,   ��                              dept : ‘’,                                  age : 0 },             db : {},             employees : [ ]          },

Now we have our employees array, we can go back to our created function and run our query using Firestore’s onSnapshot() method. onSnapshot() expects a function that will be triggered initially and then whenever the data changes. This is what is termed a callback function. onSnapshot() is unusual amongst Firestore methods as it uses a callback rather than returning a promise to handle asynchronous calls to the database and it’s important to note the difference. If we had used an alternative method to onSnapshot() to retrieve the data, such as get(), it would return a promise instead (as we covered in part 2) however in that circumstance the code you implemented to manage the data retrieval would only ever be called once which is easier to manage with a promise rather than, in this case, potentially being run multiple times whenever any data changes occur. The function we pass to onSnapshot() receives a snapshot parameter which is an object containing the actual data that comes back from Firestore in response to our query.

     created : function() {          let that = this          that.db = firebase.firestore()                  let query = that.db.collection(’Employees’)          query.onSnapshot((snapshot) => {

         })      }

In our callback function, we pick up the snapshot and manipulate it to retrieve the data into our employees array. Remembering that this function will be run each time data is changed on our queried data, not just the first time it’s run, we need to empty our employees array so we don’t end up displaying duplicate data.

Our next step is to use a method that’s included as part of the snapshot object, forEach(). The forEach() method receives another callback function that it runs for each employee as it iterates over every retrieved document in the snapshot. In the callback function that we pass in, we tell it what is to happen for each employee, in our case we want it to add each document to our employees array. Our forEach callback function receives a parameter which is the document or employee for the current iteration, in our example we call it doc. We can then use doc to extract the fields from the current document and into our array using the array’s push() method.

           query.onSnapshot((snapshot) => {             that.employees = [ ]             snapshot.forEach((doc) => {                 that.employees.push({                                                firstName  : doc.data().firstName,                     lastName : doc.data().lastName,                     jobTitle : doc.data().jobTitle,                     dept : doc.data().dept,                     age : doc.data().age                 })                        })

        })

To get the actual field information out of each document we have to call it’s data() method first followed by the field name we want. So far so good. We’ve got our data out of our Firestore and into an array we can use on the page and we’ve got a change listener so whenever any data is added, changed or deleted we know the list will be refreshed in realtime. Our next task is to use Vue to display the data on the page.

We’re going to add a table to our page which we’ll style a little bit with Bootstrap and we’ll add a new style to Vue, as we covered in part 1, to put a margin at the top of the table.

var app = new Vue({          el : ’#app’,         data : {             appTitle : ‘EmployeeMagic’,             mainStyle : { ‘margin’ : ’20px’ },             tableStyle : {’margin-top’ : ‘20px’},             employee : {firstName : ‘’,                                  lastName : ‘’,                                  jobTitle : ‘’,                                  dept : ‘’,                                  age : 0 },            db : {},            employees : [ ]         },

In the template we’ll apply our style and insert a table with the column headers. Note we’re including one column to display the full name rather than separate columns for the first and last names.

            <div :style="tableStyle">                                    <table class="table table-bordered table-striped">                                            <thead>                                                    <th>Name</th>                                                    <th>Job Title</th>                                                    <th>Department</th>                                                    <th>Age</th>                                            </thead>                                    </table>                            </div>

Our next step is to display the actual data. Like most frameworks, Vue has a mechanism to iterate through arrays and repeat part of a template based on the elements in the array. In Vue this is the v-for directive and we’ll use it to repeat a <tr> tag for each employee in our employees array that is populated with data we retrieved from Firestore.

                    </thead>                       <tbody>                         <tr v-for=“employee in employees”>

Next we’ll add in the columns of information and to display the information from our array, we reference employee (as defined in our v-for directive) and the property name using data binding with curly braces.

                                                    <td>{{ employee.firstName }} {{ employee.lastName }}</td>                             <td>{{ employee.jobTitle }}</td>                             <td>{{ employee.dept }}</td>                             <td>{{ employee.age }}</td>                         </tr>                     </tbody>                 </table>             </div>

If you now save and refresh you should now see the employee records you entered so far displayed when your app runs. Just to ensure your realtime updates are working, add a new employee record and click Save and your list will automatically refresh to include the new record. Pretty cool.

We’ve almost done with the R part of CRUD but we’ll just cover one more thing before you go and make yourself a cuppa tea. You might notice that the data isn’t sorted in any particular order and it’s a bit untidy. Ideally we would like to sort the data by name, specifically the employee’s last name. This is really easy to do with Firestore.       In the created hook function, go to the line where you declare the query object. At the moment we’re just referencing the Employees collection, we’re not filtering the list with a query and we’re not sorting on it, we’re just getting everything in any order Firestore feels like sending it to us. To sort this query by the employee’s last name all we need to do is add a call to the orderBy() method and pass in the field name you want to sort by.

    created : function() {          let that = this          that.db = firebase.firestore()                 let query = that.db.collection(’Employees’).orderBy(’lastName’)         query.onSnapshot((snapshot) => {

Save your file and refresh your browser and you’ll notice your list of employees is now sorted by the employee’s last names. Easy eh? In a future part of this tutorial we’ll cover more about sorting data and also querying to retrieve filtered data.

In this part of the tutorial we’ve covered how to setup a query to retrieve a collection from Firestore and how to retrieve updates to the collection in realtime. We’ve covered callbacks to trigger code whenever changes are made and how to populate an array in our Vue object from data in a Firestore collection and then use a table to display that data using Vue’s v-for directive and data binding and finally how to sort the data coming from Firestore. In the fourth part of this tutorial we’ll continue with CRUD, addressing the U for updating where we’ll cover how to edit and update an employee. Look forward to your company :)

You can download the completed code for this part of the tutorial on Github using the repo below and select the part3 folder. https://github.com/MancDev/VueFire